import { useEffect, useState, useRef } from "react";
import { useSearchParams } from "react-router-dom";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { getProcessXml } from "@/api/definition";
import { start } from "@/api/task";

import { message } from "antd";
import { useNavigate } from "react-router-dom";
import style from "./detail.module.scss";
import {Button} from "antd";
function Detail() {
  const divEl = useRef(null);
  const [searchParams] = useSearchParams();
  const [id] = useState(searchParams.get("id"));
  const [modeler, setModeler] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    getProcessXmlById();
  }, []);

  const getProcessXmlById = () => {
    getProcessXml(id).then((result) => {
      if (result.code === 200) {
        initModeler(result.data.bpmnXml);
      }
    });
  };

  const initModeler = (xml) => {
    divEl.current.innerHTML = "";
    const modeler = new BpmnModeler({
      container: divEl.current,
      height: 240,
      additionalModules: [
          {
              paletteProvider: ["value", ''], //禁用/清空左侧工具栏
            labelEditingProvider: ["value", ''], //禁用节点编辑
              contextPadProvider: ["value", ''], //禁用图形菜单
              bendpoints: ["value", {}], //禁用连线拖动
              zoomScroll: ["value", ''], //禁用滚动
              moveCanvas: ['value', ''], //禁用拖动整个流程图
              move: ['value', ''] //禁用单个图形拖动
          }

      ]
    });
    setModeler(modeler);
    modeler.importXML(xml, (err) => {
      if (err) {
        console.log(err);
      } else {
        console.log("success");
      }
    });
  };

  const handleClick = () => {
    start(id).then((res) => {
      if (res.code === 200) {
        message.info("发起成功").then(r => console.log(r));
        navigate(-1);
      }
    })

  };

  return (
    <>
      <div className={style.container}>
        <div className={style.btns}>
          <Button type={"primary"} onClick={() => handleClick()}>发起流程</Button>
        </div>
        <div className={style.diagram} ref={divEl}></div>

        {/* <Button type="primary" onClick={handleClick}>
          发起流程
        </Button> */}
      </div>
    </>
  );
}

export default Detail;
